<template>
	<view class="page">
		<!-- <view class="head-back">
			<view class="back" @click="onBack">
				<text></text>
			</view>
			<view class="title">
				<text>我的团单</text>
			</view>
			<view class="more-icon">
				<view class="icon-list">
					<text class="iconfont icon-fadajing"></text>
				</view>
			</view>
		</view> -->
		<!-- 订单tab -->
		<view class="order-tab">
			<view class="tab" :class="{'action':OrderType==0}" @click="onOrderTab(0)">
				<text>全部</text>
				<text class="line"></text>
			</view>
			<view class="tab" :class="{'action':OrderType==1}" @click="onOrderTab(1)">
				<text>待配送</text>
				<text class="line"></text>
			</view>
			<view class="tab" :class="{'action':OrderType==2}" @click="onOrderTab(2)">
				<text>待签收</text>
				<text class="line"></text>
			</view>
			<view class="tab" :class="{'action':OrderType==3}" @click="onOrderTab(3)">
				<text>待提货</text>
				<text class="line"></text>
			</view>
			<view class="tab" :class="{'action':OrderType==4}" @click="onOrderTab(4)">
				<text>已完成</text>
				<text class="line"></text>
			</view>
			<view class="tab" :class="{'action':OrderType==5}" @click="onOrderTab(5)">
				<text>已退款</text>
				<text class="line"></text>
			</view>
		</view>
		<view class="searchOrder">
			<view class="flex flex-align">
				<picker @change="bindPickerChange" :value="index" :range="array">
					<view class="left flex flex-align flex-bt">
						<view class="">{{array[index]}}</view>
						<tui-icon name="turningdown" :size="24" color="#999"></tui-icon>
					</view>
				</picker>
				<view class="right flex flex-align">
					<tui-icon name="search" :size="20" color="#999"></tui-icon>
					<input type="text" placeholder="请输入关键词" v-model="keyword" />
				</view>
				<view class="" style="width: 200rpx;background: #fe3b0f;color: #fff;border-radius: 4rpx;text-align: center;line-height: 50rpx;" @click="tui.dianji(searched)">搜索</view>
			</view>
		</view>
		<!-- 订单列表 -->
		<view class="order-list" style="margin-top: 210rpx;">
			<view class="list" v-for="(item,index) in datalist"  :key="index" v-if="datalist.length!=0">
				<view class="title-status">
					<view class="title">
						<text>下单时间：{{item.create_at}}</text>
					</view>
					<view class="status">
						<text>{{item.status_name}}</text>
						<!-- <text class="iconfont icon-laji del"></text> -->
					</view>
				</view>
				<view class="goods-list">
					<view class="goods" v-for="(its,ins) in item.order" :key="ins" style="align-items: normal;height: auto;padding-bottom: 20rpx;">
						<view v-if="OrderType==2" class="check" @click="checkboxChange(item.id)" style="width: 40rpx;margin-right: 20rpx;">
							<radio value="" :checked="item.checked" style="transform: scale(.7);" color="#f20" />
						</view>
						<view class="thumb" style="align-items: normal;width: 120rpx;height: 120rpx;">
							<image :src="its.goods_cover" mode="" style="width: 100rpx;height: 100rpx;"></image>
						</view>
						<view class="item" style="align-items: normal;display: block;width: 580rpx;">
							<view class="goods-name" style="width: 100%;">
								<text class="two-omit">{{its.goods_name}}</text>
							</view>
							<view class="num" v-if="its.goods_spec">商品规格：{{its.goods_spec}}</view>
							<view class="num">商品数量：{{its.stock_sales}}</view>
							<view class="num" v-if="its.goods_type==4">商品金额：<text v-if="its.price_selling!=0">{{its.price_selling}}+</text>{{its.balance3}}
							<text style="font-size: 24rpx;">红包券</text></view>
							<view class="num" v-else>商品金额：{{its.price_selling}}</view>
							<view class="num flex flex-align flex-bt">
								<view class="flex flex-align">有效金额：<text style="color: #f20;">{{its.total_selling}}</text></view>
								<view class="flex flex-align">佣金：<text style="color: #f20;">{{its.commission_rate}}</text></view>
							</view>
						</view>
					</view>
				</view>
				<view class="status-btn flex flex-align flex-bt" style="justify-content: space-between;border-top: 1px solid #f9f9f9;">
					<view class="left">
						<view class="btn action" @click.stop="telClick(item.send_phone)">
							<text class="cuIcon-phone cuIcon" style="color: #f20;font-size: 30rpx;margin-right: 10rpx;"></text>
							<text>{{item.send_name}}</text>
						</view>
					</view>
					<view class="right flex flex-align">
						<view class="btn" @click="go_url('/pages/OrderDetails/TuanOrderDetails?order_no='+item.order_no)">
							<text>查看详情</text>
						</view>
						<view class="btn" @click="getQuxiao(item.order_no)" v-if="item.status==5||item.status==6">
							<text>确认签收</text>
						</view>
						<!-- <view class="btn" @click="getQuxiao(item.order_no)" v-if="item.status==5||item.status==6">
							<text>确认核销</text>
						</view> -->
					</view>
					
				</view>
			</view>
			<view class="empty-box"  v-if="datalist.length==0">
				<image src="/static/ic_nodata.png" mode=""></image>
				<view class="">暂无数据</view>
			</view>
		</view>
		<view class="footFix flex flex-align" :style="OrderType==2?'bottom:100rpx':'bottom:0rpx;padding-bottom:20rpx'">
			<view class="flex-1">订单数量：<text style="color: #f20;">{{datainfo.order_count}}</text> </view>
			<view class="flex-1">商品数量：<text style="color: #f20;">{{datainfo.order_number}}</text> </view>
			<view class="flex-1">总金额：<text style="color: #f20;">{{datainfo.order_real}}</text> </view>
		</view>
		<view class="close-account" v-if="OrderType==2">
			<view class="check-total">
				<view class="check" @click.stop="checkboxAllChange">
					<radio :checked="isAllSelect" value="" color="#f20" style="transform: scale(.7);" />
					<text class="all">全选</text>
				</view>
				<view class="total">
					<text>合计：</text>
					<text class="price">{{selectValue.length}}</text>
				</view>
			</view>
			<view class="account">
				<view class="btn-calculate" @click="seubmite">
					<text>确认签收</text>
				</view>
			</view>
		</view>
		<view class="" style="height: 180rpx;" v-if="OrderType==2"></view>
		<view class="" style="height: 100rpx;" v-if="OrderType!=2"></view>
		<tui-modal :show="modal" @click="handleClick" @cancel="hide" content="是否确定签收" color="#333" :size="32"></tui-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				OrderType: 0,
				page:1,
				datalist:[],
				status:{'1':'待付款 ','2':'待发货','3':' 已发货','4':' 待评价','5':'已完成'},
				modal:false,
				dataId:'',
				type:'',
				keyword:'',
				index:0,
				array: [],
				typeInfo:'',
				datainfo:'',
				isAllSelect: false,
				selectValue: [],
				selectCountPrice: 0,
				check_id: [],
				status_list:[],
				isEdit:false,
				order_no:[],
				status:1
			};
		},
		onLoad(params) {
			if(params.type){
				this.OrderType = params.type;
				this.status = params.status
				uni.setNavigationBarTitle({
					title:params.status==1?'我的团单':'兑换订单'
				})
				this.page=1
				this.datalist=[]
				this.getType()
			}
		},
		onShow() {
			
		},
		onReachBottom() {
			let that = this
			that.page++
			that.getList()
		},
		methods:{
			/**
			 * 返回点击
			 */
			onBack(){
				uni.navigateBack();
			},
			checkboxChange(e) {
				let that = this;
				let value = [];
				let valid = that.datalist;
				let arr1 = [];
				let arr2 = [];
				let arr3 = [];
				if (that.check_id.length == 0) {
					that.check_id.push(e)
				} else {
					if (that.check_id.indexOf(e) == -1) {
						that.check_id.push(e)
					} else {
						console.log(e)
						that.check_id.map((item, index) => {
							if (item == e) {
								that.check_id.splice(index, 1)
							}
						})
					}
				}
				
				let newValid = valid.map(item => {
					if (that.inArray(item.id, that.check_id)) {
						item.checked = true;
						arr1.push(item);
					} else {
						item.checked = false;
						arr2.push(item);
					}
					return item;
				});
			
				that.$set(that.datalist, 'valid', newValid);
			
				that.isAllSelect = newValid.length === arr1.length
				that.selectValue = that.check_id;
			},
			checkboxAllChange() {
				this.isAllSelect = !this.isAllSelect
				if (this.isAllSelect) {
					this.setAllSelectValue(1)
				} else {
					this.setAllSelectValue(0)
				}
			},
			setAllSelectValue: function(status) {
				let that = this;
				let selectValue = [];
				let order_no = []
				let valid = that.datalist
				if (valid.length > 0) {
					let newValid = valid.map(item => {
						if (status) {
							item.checked = true;
							selectValue.push(item.id);
							order_no.push(item.order_no)
							that.isAllSelect = true;
						} else {
							item.checked = false;
							that.isAllSelect = false;
						}
						return item;
					});
					that.$set(that.datalist, 'valid', newValid);
					that.selectValue = selectValue;
					that.order_no = order_no
				}
			},
			inArray: function(search, array) {
				for (let i in array) {
					if (array[i] == search) {
						return true;
					}
				}
				return false;
			},
			seubmite(){
				let that = this
				let data = ''
				that.selectValue.map((item,index)=>{
					data = item+','+data
				})
				data = data.slice(0, -1)
				that.tui.request("api.auth.live/confirm_all", "post", {id:data}, false,false, true).then((res) => {
					that.tui.toast(res.info)
					if(res.code==1){
						setTimeout(() => {
							that.page=1
							that.datalist=[]
							that.getList()
						}, 1000)
					}
					
				}).catch((res) => {})
			},
			searched(){
				let that = this
				that.page=1
				that.datalist=[]
				that.getList()
			},
			bindPickerChange: function(e) {
				this.index = e.detail.value
			},
			getList(){
				let that = this
				console.log(that.typeInfo[that.index].id)
				that.tui.request("api.auth.live/orderList", "post", {status:that.OrderType,page:that.page,keyword:that.keyword,search_id:that.typeInfo[that.index].id,type:that.status}, false,false, false).then((res) => {
					res.data.list.map((item, index) => {
						item.checked = false
					})
					that.datalist =that.datalist.concat( res.data.list)
					that.datainfo = res.data
				}).catch((res) => {})
			},
			telClick(e) {
				uni.makePhoneCall({
					phoneNumber: e //仅为示例
				});
			},
			getType(){
				let that = this
				that.array = []
				that.tui.request("api.auth.live/search", "post", {}, false,false, true).then((res) => {
					if(res.code==1){
						that.typeInfo = res.data.list
						res.data.list.map((item,index)=>{
							that.array.push(item.name)
						})
						that.getList()
					}
				}).catch((res) => {})
			},
			/**
			 * 订单tab点击
			 */
			onOrderTab(type){
				if(type==this.OrderType){
					return
				}
				this.OrderType = type;
				this.page=1
				this.datalist=[]
				this.getList()
			},
			/**
			 * 订单列表点击
			 */
			hide(){
				this.modal = false
			},
			go_url(e){
				this.tui.href(e)
			},
			getQuxiao(e,d){
				let that = this
				
				that.modal = true
				that.type=d
				that.dataId = e
			},
			handleClick(e){
				let that = this
				that.modal =false
				if(e.index==1){
					that.tui.request("api.auth.live/confirm", "post", {order_no:that.dataId}, false,false, true).then((res) => {
						that.tui.toast(res.info)
						if(res.code==1){
							that.OrderType =3
							setTimeout(function(){
								that.page=1
								that.datalist=[]
								that.getList()
							},1000)
						}
					}).catch((res) => {})
				}else{
					that.hide()
				}
				
			},
      /**
       * 评价点击
       */
      onEvaluate(e){
			  uni.navigateTo({
          url: '/pages/MyEvaluatePush/MyEvaluatePush?item='+JSON.stringify(e)
        })
      }
		}
	}
</script>

<style scoped lang="scss">
	@import 'MyOrderList.scss';
	.order-list{
		margin-top: 320rpx;
	}
	.searchOrder{
		position: fixed;
		left: 0;
		top: 100rpx;
		/* #ifdef APP-PLUS */
		top: calc(50rpx + var(--status-bar-height));
		/* #endif */
		/* #ifdef MP */
		top: 255rpx;
		/* #endif */
		padding:20rpx;background: #fff;width: 100%;border-top: 1px solid #eee;z-index: 111;
		.left{border: 1px solid #eee;padding:4rpx 24rpx;border-radius: 6rpx;min-width: 240rpx;
			view{font-size: 24rpx;}
		}
		.right{background: #f7f7f7;margin-left: 20rpx;padding: 8rpx 24rpx;border-radius: 6rpx;width: 100%;}
	}
	.goods-list{
		.num{color: #999;padding: 4rpx 0;
			view{font-size: 24rpx;}
		}
	}
	.footFix{position: fixed;bottom: 100rpx;left: 0;width: 100%;background: #fff;text-align: center;
		.flex-1{line-height:80rpx;}
	}
	.close-account {
		position: fixed;
		left: 0;
		bottom: 0rpx;
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF;
		border-top: 2rpx solid #f6f6f6;
	
		.check-total {
			display: flex;
			align-items: center;
			width: 50%;
			height: 100%;
	
			.check {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 40%;
				height: 100%;
	
				text {
					font-size: 36rpx;
					color: #333333;
				}
	
				.icon-checked {
					color: $base;
					// box-shadow: 0 0 10rpx $base;
				}
	
				.all {
					font-size: 24rpx;
					margin-left: 10rpx;
				}
			}
	
			.total {
				display: flex;
				align-items: center;
				width: 60%;
				height: 100%;
	
				text {
					font-size: 24rpx;
					color: #333333;
				}
	
				.price {
					font-weight: bold;
					color: $base;
				}
			}
		}
	
		.account {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			width: 46%;
			padding-right: 4%;
	
			.btn-calculate {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 160rpx;
				height: 60rpx;
				background-color: $base;
				border-radius: 60rpx;
	
				text {
					color: #FFFFFF;
					font-size: 24rpx;
				}
			}
	
			.btn-del {
				display: flex;
				align-items: center;
				justify-content: space-between;
	
				.attention {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 140rpx;
					height: 60rpx;
					border: 2rpx solid #EEEEEE;
					border-radius: 60rpx;
					color: #333333;
					font-size: 24rpx;
					margin-right: 20rpx;
				}
	
				.del {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100rpx;
					height: 60rpx;
					background-color: $base;
					border-radius: 60rpx;
					color: #FFFFFF;
					font-size: 24rpx;
				}
			}
		}
	}
</style>
